<template>
  <div>
    <!-- el-tree
          data:渲染树形结构数据
          props:{
            label:'label',
            children:'children'
          },
          作用域插槽：个性化每一项的内容
             v-slot="{node,data}"
             node:组件内提供的一些数据
             data:当前项的数据

  -->
    <el-tree
      :data="list"
      :props="{
        label: 'name',
        children: 'child'
      }"
    >
      <template v-slot="{ node, data }">
        <!-- node:组件内提供的一些数据，复杂应用时考虑使用
           data:当前项的数据
      -->
        <div style="display: flex">
          <div>{{ data.name }}</div>
          <div>管理员</div>
          <div>操作</div>
        </div>
        <!-- <button @click="btnClick(node, data)">点击查看数据</button> -->
      </template>
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          name: '一级 1',
          child: [
            {
              name: '二级 1-1',
              child: [
                {
                  name: '三级 1-1-1'
                }
              ]
            }
          ]
        },
        {
          name: '一级 2',
          child: [
            {
              name: '二级 2-1',
              child: [
                {
                  name: '三级 2-1-1'
                }
              ]
            },
            {
              name: '二级 2-2',
              child: [
                {
                  name: '三级 2-2-1'
                }
              ]
            }
          ]
        },
        {
          name: '一级 3',
          child: [
            {
              name: '二级 3-1',
              child: [
                {
                  name: '三级 3-1-1'
                }
              ]
            },
            {
              name: '二级 3-2',
              child: [
                {
                  name: '三级 3-2-1'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    btnClick(node, data) {
      console.log(node, data)
    }
  }
}
</script>
<style></style>
